<!-- 保价组件 -->
<template>
  <nut-popup class="insureBox" position="bottom" closeable round :style="{ height: '45%' }" @click-close-icon="sendInsureMsg(0)" v-model:visible="props.showRound">
    <nut-cell title="保价">
      <template v-slot:default>
        <span class="title">保价</span>
        <nut-switch v-model="insuredPrice" />
      </template>
    </nut-cell>
    <nut-cell class="ibo">
      <span class="tit">声明价值</span> <nut-input placeholder="请输入声明价值" v-model="insuredMoney" type="digit" />
      <span>元</span>
    </nut-cell>
    <nut-cell class="ibo"> <span class="tit">费率</span> <nut-input placeholder="请输入费率" v-model="insuredRate" type="digit" /> <span>‰</span> </nut-cell>
    <nut-cell class="btn_box">
      <view class="flex_ld"><span>保费</span> <span class="font_blue">￥{{ insuredFee }}</span></view>
      <nut-button class="button" block type="primary" color="#0966ff" @click="sendInsureMsg(1)">保价</nut-button>
    </nut-cell>
  </nut-popup>
</template>

<script setup lang="ts">
import { ref, watch, computed } from 'vue'
import Taro, { useDidShow } from '@tarojs/taro'

const showFlag = ref(true)

useDidShow(() => {
  showFlag.value = props.showRound
})

const props = defineProps<{
  showRound: boolean
}>()

const emit = defineEmits(['sendInsureMsg'])

const insuredPrice = ref(true) // 0 不保价 1 保价
const insuredMoney = ref('1') // 声明价值 最低1 0就是不保价
// const insuredFee = ref('0'); // 保费 最低5元
const insuredRate = ref('0') // 费率

let insuredFee = computed(() => {
  // console.log(insuredMoney.value, '声明价值', insuredRate.value, '费率')
  // console.log(Number(insuredMoney.value) * (Number(insuredRate.value) / 1000), '计算保费')
  const insureFee = Number(insuredMoney.value) * (Number(insuredRate.value) / 1000)
  if (insureFee < 5) {
    return 5
  } else {
    return insureFee
  }
})

// 监听是否保价
watch(
  () => insuredPrice,
  () => {
    // 如果不保价
    if (Number(insuredPrice.value) == 0) {
      // 1.关闭弹窗
      // 将所有置0回传
      const sendData = {
        insuredPrice: 0,
        insuredMoney: 0,
        insuredFee: 0,
        insuredRate: 0
      }
      emit('sendInsureMsg', sendData) // 关闭弹窗传递数据
    } else if (Number(insuredPrice.value) == 1) {
      // 1.判断声明价值是否小于1 如果是就提示
      if (Number(insuredMoney.value) < 1) {
        Taro.showToast({
          icon: 'error',
          title: '价值不能小于1元'
        })
      }
    }
  },
  { deep: true }
)

const sendInsureMsg = (flag) => {
  // 如果保价 校验声明价值是否填写是否>1
  console.log(insuredMoney.value, 'sss')
  if (flag) {
    if (Number(insuredMoney.value) < 1) {
      Taro.showToast({
        icon: 'error',
        title: '价值不能小于1元'
      })
      return
    }
    const sendData = {
      insuredPrice: 1, // 是否保价
      insuredMoney: Number(insuredMoney.value), // 声明价值
      insuredFee: insuredFee.value, // 保费
      insuredRate: Number(insuredRate.value) // 费率
    }
    emit('sendInsureMsg', sendData) // 关闭弹窗传递数据
    // 把开关打开
    insuredPrice.value = true
  } else {
    emit('sendInsureMsg', null) // 关闭弹窗不传数据
  }
}

const close = () => {
  showFlag.value = false
}
</script>

<style lang="scss">
.insureBox {
  .ibo {
    display: flex;
    align-items: center;
    justify-content: flex-start;

    .tit {
      width: 112rpx;
      font-weight: bold;
    }

    .nut-input {
      width: 498rpx;
      height: 72rpx;
      border-radius: 8rpx;
      background: #f5f5f5;
      margin: 0 24rpx;
      text-align: center;
    }
  }

  .title {
    font-weight: bold;
    margin-right: 8rpx;
  }

  .nut-tabs.vertical .nut-tabs__titles-item.active .nut-tabs__titles-item__line {
    left: 0rpx;
    width: 6rpx;
    background: #0966ff;
  }

  .nut-cell {
    margin: 0;
  }

  .nut-tab-pane {
    padding: 0;
  }

  .nut-radio-group {
    display: block;
  }

  .flex_center {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .flex_ld {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .btn_box {
    position: fixed;
    bottom: 10rpx;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 88rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .font_blue {
      color: #0966ff;
    }

    .button {
      width: 218rpx;
      height: 72rpx;
      border-radius: 88rpx;
    }
  }

  .nut-radio__button {
    width: 210rpx;
    height: 72rpx;
    border-radius: 88rpx;
    justify-content: center;
  }

  .nut-switch {
    // background: #0966ff;
  }

  .nut-radio__button--active {
    color: #0966ff;
    font-weight: bold;
  }

  .nut-radio__button--active {
    color: var(--nut-radio-label-font-active-color, var(--nut-primary-color, #0966ff));
    border: 2rpx solid var(--nut-radio-label-button-border-color, var(--nut-primary-color, #0966ff));
  }

  .nut-radio__button--active::after {
    border-radius: 88rpx;
    background-color: var(--nut-radio-label-button-background, var(--nut-primary-color, #0966ff));
  }
}
</style>
